<template>
  <a-modal
    :visible="visible"
    :title="$t('确认打款')"
    :mask-closable="false"
    width="550px"
    @cancel="close"
    @update:visible="(val: boolean) => emit('update:visible', val)"
  >
    <div class="payment-form">
      <div class="info-panel">
        <div class="panel-header">
          <div class="panel-title">{{ $t('提现信息') }}</div>
          <a-tag color="orange" size="small">{{ $t('审核已通过') }}</a-tag>
        </div>
        <div class="panel-content">
          <div class="info-item">
            <span class="info-label">{{ $t('提现编号') }}:</span>
            <span class="info-value">{{ record?.withdrawNo }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">{{ $t('运营商') }}:</span>
            <span class="info-value">{{ record?.partnerName }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">{{ $t('实际打款金额') }}:</span>
            <span class="info-value amount">
              {{ record?.actualAmount ? '¥' + record.actualAmount.toFixed(2) : '-' }}
            </span>
          </div>
        </div>
      </div>
      
      <div class="info-panel payment-method-panel">
        <div class="panel-title">{{ $t('收款信息') }}</div>
        <div class="panel-content">
          <div class="info-item">
            <span class="info-label">{{ $t('打款方式') }}:</span>
            <span class="info-value">{{ getPaymentMethodName(record?.paymentMethod) }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">{{ $t('收款人') }}:</span>
            <span class="info-value">{{ record?.paymentName }}</span>
          </div>
          
          <!-- 银行转账信息 -->
          <template v-if="record?.paymentMethod === PaymentMethod.BANK">
            <div class="info-item">
              <span class="info-label">{{ $t('银行名称') }}:</span>
              <span class="info-value">{{ record?.bankName }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">{{ $t('银行账号') }}:</span>
              <span class="info-value">{{ record?.bankAccount }}</span>
            </div>
            <div class="info-item" v-if="record?.bankBranch">
              <span class="info-label">{{ $t('开户支行') }}:</span>
              <span class="info-value">{{ record?.bankBranch }}</span>
            </div>
          </template>
          
          <!-- 支付宝信息 -->
          <template v-if="record?.paymentMethod === PaymentMethod.ALIPAY">
            <div class="info-item">
              <span class="info-label">{{ $t('支付宝账号') }}:</span>
              <span class="info-value">{{ record?.alipayAccount }}</span>
            </div>
          </template>
          
          <!-- 微信信息 -->
          <template v-if="record?.paymentMethod === PaymentMethod.WECHAT">
            <div class="info-item">
              <span class="info-label">{{ $t('微信账号') }}:</span>
              <span class="info-value">{{ record?.wechatAccount }}</span>
            </div>
          </template>
        </div>
      </div>
      
      <a-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-align="right"
        :label-col-props="{ span: 5 }"
        :wrapper-col-props="{ span: 19 }"
      >
        <a-form-item field="paymentVoucher" :label="$t('打款凭证')" required>
          <a-upload
            action="/api/file/upload"
            :file-list="fileList"
            :limit="1"
            accept="image/*"
            image-preview
            :show-remove-button="true"
            :show-upload-button="false"
            @change="handleUploadChange"
          >
            <template #upload-button>
              <div class="upload-demo">
                <div class="upload-wrapper">
                  <div class="upload-content">
                    <a-space direction="vertical" align="center" size="mini">
                      <icon-upload />
                      <div>{{ $t('点击或拖拽文件到此处上传') }}</div>
                    </a-space>
                  </div>
                </div>
              </div>
            </template>
          </a-upload>
          <div class="upload-hint">{{ $t('请上传打款凭证，支持 jpg、png、jpeg 格式') }}</div>
        </a-form-item>
      </a-form>
    </div>
    <template #footer>
      <a-space>
        <a-button @click="close">{{ $t('取消') }}</a-button>
        <a-button
          type="primary"
          status="success"
          :loading="submitting"
          @click="handleSubmit"
        >
          {{ $t('确认已打款') }}
        </a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, reactive, PropType, watch } from 'vue';
import { FormInstance, Message } from '@arco-design/web-vue';
import { 
  PaymentMethod,
  PartnerWithdrawVO,
  confirmPayment
} from '@/api/partner/withdraw';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  record: {
    type: Object as PropType<PartnerWithdrawVO | null>,
    default: null
  }
});

const emit = defineEmits(['update:visible', 'success']);

// 表单引用
const formRef = ref<FormInstance>();

// 提交状态
const submitting = ref(false);

// 文件列表
const fileList = ref<any[]>([]);

// 表单数据
const formData = reactive({
  paymentVoucher: ''
});

// 表单校验规则
const rules = {
  paymentVoucher: [{ required: true, message: '请上传打款凭证' }]
};

// 监听可见性变化
watch(
  () => props.visible,
  (val) => {
    if (!val) {
      formData.paymentVoucher = '';
      fileList.value = [];
    }
  }
);

// 获取支付方式名称
function getPaymentMethodName(method: number | undefined) {
  if (method === undefined) return '';
  
  switch (method) {
    case PaymentMethod.BANK:
      return '银行转账';
    case PaymentMethod.ALIPAY:
      return '支付宝';
    case PaymentMethod.WECHAT:
      return '微信';
    default:
      return '未知';
  }
}

// 处理上传变化
function handleUploadChange(options: any) {
  const { fileList: newFileList, file } = options;
  fileList.value = newFileList;
  
  if (file.status === 'done' && file.response?.success) {
    formData.paymentVoucher = file.response.data;
  } else if (file.status === 'error') {
    Message.error('上传失败');
  }
}

// 关闭对话框
function close() {
  emit('update:visible', false);
  formRef.value?.resetFields();
}

// 提交表单
async function handleSubmit() {
  if (!props.record || !props.record.id) return;
  
  try {
    await formRef.value?.validate();
    
    submitting.value = true;
    await confirmPayment(props.record.id, formData.paymentVoucher);
    
    Message.success('确认打款成功');
    emit('success');
    close();
  } catch (error) {
    console.error('确认打款失败:', error);
    if (error instanceof Error) {
      Message.error(error.message);
    } else {
      Message.error('确认打款失败');
    }
  } finally {
    submitting.value = false;
  }
}
</script>

<style scoped lang="less">
.payment-form {
  .info-panel {
    margin-bottom: 20px;
    background-color: #f5f7fa;
    border-radius: 4px;
    padding: 12px 16px;
    
    &.payment-method-panel {
      background-color: #f0f7ff;
    }
    
    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    
    .panel-title {
      font-weight: 500;
      margin-bottom: 12px;
      font-size: 14px;
      color: #1D2129;
    }
    
    .panel-content {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 12px;
      
      .info-item {
        font-size: 13px;
        
        &:first-child {
          grid-column: span 2;
        }
        
        .info-label {
          color: #4E5969;
          margin-right: 8px;
        }
        
        .info-value {
          color: #1D2129;
          font-weight: 500;
          
          &.amount {
            color: #FF5722;
            font-size: 16px;
          }
        }
      }
    }
  }
  
  .upload-demo {
    border: 1px dashed #C9CDD4;
    border-radius: 4px;
    transition: border-color 0.3s;
    cursor: pointer;
    
    &:hover {
      border-color: #165DFF;
    }
    
    .upload-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100px;
      
      .upload-content {
        text-align: center;
        color: #86909C;
      }
    }
  }
  
  .upload-hint {
    margin-top: 4px;
    font-size: 12px;
    color: #86909C;
  }
}
</style> 